<template>
  <div id="progress-loop" ref="chartDom" :style="`width: 100%;height:100%;`"></div>
</template>

<script setup lang="ts" name="dataScreen">
import { watch, ref, onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
import { debounce } from "@/utils";
import { countSize } from "@/utils/utils";
import * as echarts from 'echarts';
const chartDom = ref();

const props = defineProps({
  barData: {
    type: Array,
    default: {},
  },
  color1: {
    type: Array,
    default: [],
  },
  color2: {
    type: Array,
    default: [],
  },
  height: {
    type: String,
    default: '',
  },
})
watch(() => props.barData, (value) => {
  initChart();
}, { deep: true });
let myChart = null;
const Option = computed(() => {
  return {
    title: {
      text: props.barData.deptName,
      textStyle: {
        //图例文字的样式
        fontSize: countSize(0.14),
        color: "#fff",
      },
      left: "left",
      top: "0",
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: "2%",
      right: "4%",
      bottom: "0%",
      top: 30,
      padding: "0 0 10 0",
      containLabel: true,
    },
    legend: {
      //图例组件，颜色和名字
      right: 10,
      top: 0,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true, //坐标轴两边留白
        data: props.barData.xAxisData,
        axisLabel: {
          //坐标轴刻度标签的相关设置。
          interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
          rotate: 45, // 旋转角度
        },
        axisTick: {
          //坐标轴刻度相关设置。
          show: false,
        },
        axisLine: {
          //坐标轴轴线相关设置
          lineStyle: {
            color: "#fff",
            opacity: 0.2,
          },
        },
        splitLine: {
          //坐标轴在 grid 区域中的分隔线。
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        splitNumber: 5,
        axisLabel: {
          textStyle: {
            color: "#a8aab0",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: countSize(0.12)
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#fff"],
            opacity: 0.06,
          },
        },
      },
    ],
    series: [
      {
        data: props.barData.seriesData,
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          show: true,
          // position: "top",
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        },
      }
      // {
      //   type: "bar",
      //   data: ,
      //   // barWidth: 10,
      //   // barGap: 0, //柱间距离
      //   label: {
      //     //图形上的文本标签
      //     normal: {
      //       show: true,
      //       position: "top",
      //       textStyle: {
      //         color: "#ffff",
      //         // fontStyle: "normal",
      //         // fontFamily: "微软雅黑",
      //         // fontSize: countSize(0.12)
      //       },
      //     },
      //   },
      //   
      // },
    ],
  };
})
const initChart = () => {
  myChart.setOption(Option.value);
};
const resizeChart = () => {
  myChart.resize();
  initChart()
};
const resizeHandler = debounce(resizeChart, 100);
onMounted(() => {
  nextTick(() => {
    myChart = echarts.init(chartDom.value);
    initChart();
  });
  window.addEventListener("resize", resizeHandler);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeHandler);
  myChart.dispose();
});
</script>